<template>
  <div>
    <div class="block">
      <el-carousel
        indicator-position="outside"
        trigger="click"
        :autoplay="true"
        arrow="always"
        :interval="5000"
        :height="bannerHeight + 'px'"
      >
        <el-carousel-item v-for="(item, i) in banners" :key="i">
          <h3 style="opacity: 0.8">
            <a :href="item.bannerHref">
              <img :src="getStrapiMedia(item.bannerImage.url)" />
            </a>
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="logoscroll">
      <client-only>
        <vue-seamless-scroll
          :data="listData"
          :class-option="classOption"
          class="warp"
        >
          <ul class="ul-item">
            <li v-for="(item, index) in listData" :key="index" class="li-item">
              <img :src="'/logo/' + index + '.jpg'" />
              <!--            <img-->
              <!--              :src="getStrapiMedia(item.bannerImage.url)"-->
              <!--              width="120"-->
              <!--              height="120"-->
              <!--              border="0"-->
              <!--            />-->
            </li>
          </ul>
        </vue-seamless-scroll>
      </client-only>
    </div>
    <!-- 第一栏标题 -->
    <div class="uk-section index_pictures1">
      <div
        class="uk-container uk-container-expand fadeInUp wow animate__fadeInUp"
      >
        <el-row>
          <el-col :span="12" :xs="24">
            <div class="grid-content uk-navbar-nav index_title">
              <h3 style="line-height: 1; margin-bottom: 0; font-weight: bold">
                Graphic Design
              </h3>
            </div></el-col
          >
          <el-col :span="12" :xs="24">
            <ul class="uk-navbar-nav subnavbar index_subtitle">
              <li v-for="category in categories" :key="category.id">
                <nuxt-link
                  :to="{
                    name: 'categories-slug',
                    params: { slug: category.slug },
                  }"
                  tag="a"
                >
                  {{ category.name }}
                </nuxt-link>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 第一栏图片展示 -->
    <div class="uk-section index_pictures">
      <div
        class="uk-container uk-container-expand"
        style="display: flex; justify-content: space-between; flex-wrap: wrap"
      >
        <div
          v-for="art in articles.slice(0, 6)"
          :key="art.id"
          style="padding: 10px; flex: 30%; position: relative"
          class="index_imgitem fadeInUp wow animate__fadeInUp"
        >
          <nuxt-link
            :to="{
              name: 'articles-id',
              params: { id: art.id },
            }"
            tag="a"
          >
            <img
              style="border-radius: 10px"
              :src="getStrapiMedia(art.image.url)"
            />
            <!-- <img src="~assets/banner1.jpg" /> -->
            <h4 style="margin-top: 15px; margin-bottom: 10px; line-height: 1">
              {{ art.title }}
            </h4>
            <div class="mask">
              <div
                style="
                  display: block;
                  border: 1px solid white;
                  padding: 10px 40px;
                "
              >
                Views
              </div>
            </div>
            <!--            <span style="font-size: small">{{ art.description }}</span>-->
          </nuxt-link>
        </div>
        <!-- <div style="width: 32%"><img src="~assets/banner1.jpg" />dsafadsf</div>
        <div style="width: 32%"><img src="~assets/banner1.jpg" />大法师的</div> -->
      </div>
    </div>
    <!--  -->
    <!-- 第二栏标题 -->
    <div
      class="uk-section"
      style="padding: 10px 40px; background-color: #f7f7f7"
    >
      <div
        class="
          uk-container uk-container-expand
          fadeInUp
          wow
          animate__fadeInUp
          index_pictures1
        "
      >
        <el-row>
          <el-col :span="12" :xs="24">
            <div class="grid-content uk-navbar-nav index_title">
              <h3 style="line-height: 1; margin-bottom: 0; font-weight: bold">
                Photo Graphic
              </h3>
            </div>
          </el-col>
          <el-col :span="12" :xs="24">
            <ul class="uk-navbar-nav subnavbar index_subtitle">
              <li
                v-for="category in categoryphotos.slice(0, 5)"
                :key="category.id"
              >
                <nuxt-link
                  :to="{
                    name: 'photoscategories-slug',
                    params: { slug: category.slug },
                  }"
                  tag="a"
                >
                  {{ category.name }}
                </nuxt-link>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 第二栏图片展示 -->
    <div style="background-color: #f7f7f7">
      <div class="uk-section index_pictures2">
        <div
          class="uk-container uk-container-expand"
          style="display: flex; justify-content: space-between; flex-wrap: wrap"
        >
          <div
            v-for="photo in photos.slice(0, 6)"
            :key="photo.id"
            style="padding: 10px; flex: 30%; position: relative"
            class="index_imgitem fadeInUp wow animate__fadeInUp"
          >
            <nuxt-link
              :to="{
                name: 'photos-id',
                params: { id: photo.id },
              }"
              tag="a"
            >
              <img
                style="border-radius: 10px"
                :src="getStrapiMedia(photo.image.url)"
              />
              <!-- <img src="~assets/banner1.jpg" /> -->
              <h4 style="margin-top: 15px; margin-bottom: 10px; line-height: 1">
                {{ photo.title }}
              </h4>
              <div class="mask1">
                <div
                  style="
                    display: block;
                    border: 1px solid white;
                    padding: 10px 40px;
                  "
                >
                  Views
                </div>
              </div>
              <!--            <span style="font-size: small">{{ photo.description }}</span>-->
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>
    <!-- news栏标题 -->
    <div
      class="uk-section"
      style="padding: 20px 70px; background-color: #ffffff"
    >
      <div
        class="uk-container uk-container-expand fadeInUp wow animate__fadeInUp"
      >
        <el-row>
          <el-col :span="12" :xs="24">
            <div class="grid-content uk-navbar-nav index_title">
              <h3 style="line-height: 1; margin-bottom: 0; font-weight: bold">
                Our Service
              </h3>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- news栏图片展示 -->
    <div class="uk-section news_main">
      <div
        class="uk-container uk-container-expand fadeInUp wow animate__fadeInUp"
      >
        <div class="news_content">
          <div class="index_imgitem">
            <nuxt-link to="/VisualCreativePlanning" tag="a">
              <!-- <nuxt-link
              :to="{
                name: 'news-id',
                params: { id: '1321' },
              }"
              tag="a"
            > -->
              <div
                style="
                  margin-top: 70px;
                  margin-bottom: 5px;
                  line-height: 1;
                  font-size: 1.5rem;
                "
              >
                <b>新视觉创意</b>
              </div>
              <div style="font-size: 14px">Visual creative planning</div>
            </nuxt-link>
          </div>
          <div class="index_imgitem">
            <nuxt-link to="/vi" tag="a">
              <div
                style="
                  margin-top: 70px;
                  margin-bottom: 5px;
                  line-height: 1;
                  font-size: 1.5rem;
                "
              >
                <b>品牌视觉VI规范</b>
              </div>
              <div style="font-size: 14px">
                Visual specification and application
              </div>
            </nuxt-link>
          </div>
          <div class="index_imgitem">
            <nuxt-link to="/video" tag="a">
              <div
                style="
                  margin-top: 70px;
                  margin-bottom: 5px;
                  line-height: 1;
                  font-size: 1.5rem;
                "
              >
                <b>摄影及摄像</b>
              </div>
              <div style="font-size: 14px">Photography and Video</div>
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>
    <!-- Brand栏标题
    <div
      class="uk-section"
      style="padding: 20px 0px; background-color: #f7f7f7"
    >
      <div
        class="uk-container uk-container-expand fadeInUp wow animate__fadeInUp"
      >
        <el-row>
          <el-col :span="12" :xs="24">
            <div class="grid-content uk-navbar-nav index_title">
              <h3 style="line-height: 1; margin-bottom: 0; font-weight: bold">
                Brand Customers
              </h3>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>-->
    <!-- brand栏图片展示
    <div
      class="uk-section"
      style="padding: 0 0 20px 0px; background-color: #ffffff"
    >
      <div class="fadeInUp wow animate__fadeInUp">
        <div class="news_content">
          <img
            style="border-radius: 10px"
            class="fadeInUp wow animate__fadeInUp"
            :src="getStrapiMedia(homepage.brandcustomers.image.url)"
          />
        </div>
      </div>
    </div>-->
    <!-- contact -->
    <!-- <div>
      <div class="fadeInUp wow animate__fadeInUp">
        <div class="contact_div">
          <div class="bottom_content">
            <h4>
              <span style="color: white; font-weight: bold">联系方式</span>
            </h4>
            极刻热线电话：400-666-666 <br />
            企业合作邮箱：bd@jike.com
          </div>
          <div class="bottom_content">
            <h4>
              <span style="color: white; font-weight: bold">服务范围</span>
            </h4>
            新视觉创意 <br />
            品牌视觉VI规范<br />
            摄影及摄像
          </div>
          <div class="bottom_content">
            <h4>
              <span style="color: white; font-weight: bold">关于我们</span>
            </h4>
            新视觉创意 <br />
            品牌视觉VI规范<br />
            摄影及摄像
          </div>
        </div>
      </div>
    </div> -->
    <Bottom />
  </div>
</template>

<script>
// import Articles from "../components/Articles";
import { getMetaTags } from "../utils/seo";
import { getStrapiMedia } from "../utils/medias";
import Bottom from "@/components/Bottom";
if (process.browser) {
  // 在这里根据环境引入wow.js
  var { WOW } = require("wowjs");
}
export default {
  components: {
    // Articles,
    Bottom,
  },
  async asyncData({ $strapi }) {
    // .then((item) => {
    //   let temp = [...item];
    //   temp.sort((a, b) => {
    //     return b.id - a.id;
    //   });
    //   console.log(temp);
    //   return item;
    // })
    let tempart = await $strapi.find("articles");
    tempart.sort((a, b) => {
      return b.id - a.id;
    });
    let tempphotos = await $strapi.find("photos");
    tempphotos.sort((a, b) => {
      return b.id - a.id;
    });
    let tempnews = await $strapi.find("Mynews");
    tempnews.sort((a, b) => {
      return b.id - a.id;
    });
    return {
      categories: await $strapi.find("categories"),
      categoryphotos: await $strapi.find("categoryphotos"),
      articles: tempart,
      photos: tempphotos,
      allnews: tempnews,
      banners: await $strapi.find("banners"),
      homepage: await $strapi.find("homepage"),
      global: await $strapi.find("global"),
    };
  },
  data() {
    return {
      bannerHeight: 700,
      screenWidth: 0,
      listData: new Array(19),
      classOption: {
        limitMoveNum: 6,
        direction: 2,
      },
    };
  },
  mounted() {
    // 首次加载时,需要调用一次设置轮播
    this.screenWidth = window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次设置轮播
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    };
    // this.mySwiper.slideTo(3, 1000, false)
    this.$nextTick(() => {
      if (process.browser) {
        // 在页面mounted生命周期里面 根据环境实例化WOW
        // console.log(this.$appName);
        new WOW({ animateClass: "animate__animated" }).init();
      }
    });
  },
  methods: {
    setSize: function () {
      // 设置轮播图尺寸 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = (700 / 1920) * this.screenWidth;
    },
    getStrapiMedia,
  },
  head() {
    const { seo } = this.homepage;
    const { defaultSeo, favicon, siteName } = this.global;

    // Merge default and article-specific SEO data
    const fullSeo = {
      ...defaultSeo,
      ...seo,
    };

    return {
      titleTemplate: `%s | ${siteName}`,
      title: fullSeo.metaTitle,
      meta: getMetaTags(fullSeo),
      link: [
        {
          rel: "favicon",
          href: getStrapiMedia(favicon.url),
        },
      ],
    };
  },
};
</script>
<style scoped>
.mask {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 10px;
  left: 10px;
  height: calc(100% - 65px);
  width: calc(100% - 20px);
  border-radius: 10px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.5s;
  -moz-transition: opacity 0.5s; /* Firefox 4 */
  -webkit-transition: opacity 0.5s; /* Safari and Chrome */
  -o-transition: opacity 0.5s; /* Opera */
}
.mask:hover {
  opacity: 100;
}
.mask1 {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 10px;
  left: 10px;
  height: calc(100% - 65px);
  width: calc(100% - 20px);
  border-radius: 10px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.5s;
  -moz-transition: opacity 0.5s; /* Firefox 4 */
  -webkit-transition: opacity 0.5s; /* Safari and Chrome */
  -o-transition: opacity 0.5s; /* Opera */
}
.mask1:hover {
  opacity: 100;
}
.logoscroll {
  display: block;
  overflow: hidden;
  margin: 0 110px;
  margin-top: 30px;
  background: #f7f7f7;
  border-radius: 10px;
}

.warp {
  width: 100%;
  padding: 20px;
  height: 120px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #f7f7f7;
}
.warp ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  background-color: #f7f7f7;
}
.index_pictures {
  padding: 0px;
  margin: 20px 60px;
}
.index_pictures1 {
  padding: 0px;
  margin: 20px 60px 20px 70px;
}
.index_pictures2 {
  padding: 0px;
  margin: 0 60px 20px 60px;
}
.ul-item {
  display: flex;
  align-items: center;
  background-color: #f7f7f7;
}
.li-item {
  width: 120px;
  height: 120px;
  margin-right: 10px;
  line-height: 120px;
  background-color: #f7f7f7;
  text-align: center;
  font-size: 30px;
}
.news_content_div {
  padding: 5px;
  flex: 30%;
  text-align: center;
  min-height: 200px;
}
.index_subtitle {
  justify-content: flex-end;
}

.index_imgitem {
  padding: 5px;
  flex: 30%;
  text-align: center;
  min-height: 200px;
  font-size: 30px;
}
.news_main {
  padding: 0 70px 20px 70px;
  background-color: #ffffff;
}
@media only screen and (max-width: 768px) {
  .mask1 {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 10px;
    left: 10px;
    height: calc(100% - 85px);
    width: calc(100% - 20px);
    border-radius: 10px;
    text-align: center;

    background-color: rgba(0, 0, 0, 0.5);
    font-size: 16px;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.5s;
    -moz-transition: opacity 0.5s; /* Firefox 4 */
    -webkit-transition: opacity 0.5s; /* Safari and Chrome */
    -o-transition: opacity 0.5s; /* Opera */
  }
  .mask1:hover {
    opacity: 100;
  }
  .news_main {
    padding: 0 0px 20px 0px;
    background-color: #ffffff;
  }
  .index_pictures {
    padding: 0px;
    margin: 0px;
  }
  .index_pictures1 {
    padding: 0px;
    margin: 20px 20px 10px 20px;
  }
  .index_pictures2 {
    padding: 0px;
    margin: 0 0px 20px 0px;
  }
  .logoscroll {
    display: block;
    overflow: hidden;
    margin: 0 20px;
    background: #f7f7f7;
  }
  .warp {
    width: 100%;
    padding: 0px;
    height: 120px;
    margin: 0 auto;
    overflow: hidden;
    background-color: #f7f7f7;
  }
  /* For mobile phones: */
  .index_title {
    justify-content: center;
  }
  .index_subtitle {
    margin-top: 10px;
    justify-content: center;
  }
  .bottom_content {
    flex: 100%;
    text-align: center;
    margin-top: 50px;
    color: rgb(146, 146, 146);
  }
  .index_imgitem {
    font-size: 18px;
  }
}

.subnavbar li a {
  min-height: 30px;
}
.index_imgitem a {
  color: #4e4e4e;
  text-decoration: none;
}

.el-carousel__item h3 {
  color: #ffffff;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #ffffff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #ffffff;
}
</style>
